<template lang="html">
  <div class="container">
    <div class="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号或客户姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="tables" v-loading="loading">
      <vTable :tableData="tableData" ref="vTable" :tInData="tInData" @onCheckAll="onCheckAll" @onCheck="onCheck">
          <template slot="产品" slot-scope="scope">
              <div class="pro">
                  <div class="pro_image">
                    <img :src="scope.row.picUrl" alt="">
                  </div>
                  <div class="pro_info">
                    <div class="pro_name">{{scope.row.commodityName}}</div>
                    <div class="num_color">{{scope.row.color}}x{{scope.row.commodityPrice}}</div>
                    <div class="address">地址：{{scope.row.address}}</div>
                  </div>
              </div>
          </template>
          <template slot="客户" slot-scope="scope">
            <div class="userinfo">
              <p>ID：{{scope.row.memberId}}</p>
              <p>姓名：{{scope.row.userName}}</p>
              <p>手机号：{{scope.row.phone}}</p>
            </div>
          </template>
          <template slot="状态" slot-scope="scope">
            <div class="">
              <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :inactive-value="2" :active-value="1" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
            </div>
          </template>
          <template slot="操作" slot-scope="scope">
            <div style="padding:0 10px;">
                <el-button size="mini" type="danger" @click="handleDetail(scope.row)">详情</el-button>
            </div>
          </template>
      </vTable>

    </div>

    <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      searchText: '',
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      tableData: [],
      tInData:[
        {
          props: 'orderSublistId',
        },
        {
          props: 'createTime',
        },
        {
          title: '产品',
          width: '300px',
        },
        {
          title: '销售金额',
          props: 'commodityPrice',
          width: '120px',
        },
        {
          title: '店铺',
          props: 'branchStoreName',
          width: '200px',
        },
        {
          title: '客户',
          width: '300px',
        },
        {
          title: '设计师',
          props: 'designerName',
          width: '120px',
        },
        {
          title: '结算价格',
          props: 'realPrice',
          width: '120px',
        },
        {
          title: '预付款',
          props: 'prepaidBalance',
          width: '120px',
        },
        {
          title: '状态',
          width: '120px',
        },
        {
          title: '操作'
        },
      ],
      selectData: []
    }
  },
  computed:{
    isShutdownAudit:function(){
        return this.selectData.length == 0?true:false;
    }
  },
  created(){
    this.selectFactoryOrderPage();
  },
  methods:{
    onSubmit(){
      this.handleCurrentChange(1);
    },
    selectFactoryOrderPage(){
      this.loading = true;
      this.$http.selectFactoryOrderPage({
        query: this.searchText,
        factoryId: this.$route.query.id,
        pageSize: this.pageSize,
        pageNumber: this.currentPage,
      }).then(res=>{
        this.loading = false;
        if(res.data.code == -1) return ;
        this.tableData = res.data.rows;
        this.tableData.forEach(item=>{
          if(item.createTime){
            item.createTime = this.formatTime(item.createTime);
          }
        })
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
      });
    },
    formatTime(value) {
      if(!value) return '';
      let oDate = new Date(value);
      let h = oDate.getHours()<10?'0'+oDate.getHours():oDate.getHours();
      let m = oDate.getMinutes()<10?'0'+oDate.getMinutes():oDate.getMinutes();
      let s = oDate.getSeconds()<10?'0'+oDate.getSeconds():oDate.getSeconds();
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+h+':'+m+':'+s;
    },
    onCheckAll(val){
      if(this.tableData.length==0){
        return false;
      }
      if(val.status){
        this.selectData = [];
        this.tableData.forEach((item,index)=>{
          this.selectData.push(index)
        })
      }else{
        this.selectData = [];
      }
    },
    onCheck(val){
      if(val.status){
        this.selectData.push(val.index);
      }else{
        this.selectData = this.selectData.filter(arr=>(arr!==val.index))
      }
    },
    onSwitch(e){
      this.$http.closeFactoryOrder({id: e.id,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.$refs.vTable.onCheckAll(false);
      this.$refs.vTable.checkAll = false;
      this.selectData = [];
      this.currentPage = e;
      this.selectFactoryOrderPage();
    },
    handleDetail(e){
      this.$router.push({ path: '/system/account/factory_order_d', query:{id: e.orderSublistId}})
    },

  }
}
</script>

<style lang="css" scoped>
.userinfo{
  line-height: 30px;
  font-size: 14px;
}
.pro{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
.pro_image{
  width: 80px;
  height: 100px;
  background: #eee;
  display: flex;
  margin-right: 15px;
  align-items: center;
  overflow: hidden;
}
.pro_image img{
  width: 100%;
  display: block;
}
.pro_info{
  line-height: 25px;
  text-align: left;
  width: 65%;
}
.pro_name{
  color: #666666;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.num_color,.address{
  color: #999;
}
</style>
